<script setup lang="ts">
import useDialog from '@/hooks/useDialog';
import { usePagination } from '@/hooks/usePagination';
import { list } from '@/api/siteInfo';
import { IQuery } from '@/api/siteInfo/types';
import AlarmVideo from '@/components/AlarmVideo/index.vue';
import { adjustWebSocketUrl } from '@/utils/adjustWebSocketUrl';
import useImagePreview from '@/hooks/useImagePreview';

const props = defineProps(['info', 'overhaul']);

const getImagePreview = (path: string) => {
  const { previewImage, imageList } = useImagePreview(path, { serverUrl: '100.70.1.11:9255' });
  return {
    previewImage: previewImage.value,
    imageList: imageList.value
  };
};
const { visible, openDialog, closeDialog } = useDialog({});
const { tableData, loading, total, queryParams } = usePagination();
const getAlarmName = computed(() => {
  const getPressureUnit = () => {
    return props.overhaul.category.includes('低压') ? 'Pa' : 'MPa';
  };

  switch (props.info.alarmType) {
    case '02':
      return `压力值${getPressureUnit()}`;
    case '01':
      return '气体浓度%lel';
    case '04':
      return '阀门状态';
    default:
      return '未知类型';
  }
});

//判断是否是Mpa 如果是的话需要除去一百万
const alarmValue = (value: number | string) => {
  // 处理中压的情况
  // 处理 alarmType 为 '04' 的情况 当报警类型是其他几个的时候保留两位小数
  if (props.overhaul.category.includes('中压') && typeof value === 'number') {
    return value / 1000000;
  } else if (props.info.alarmType === '04') {
    return value === 'null' ? '开启' : value;
  } else {
    return typeof value === 'number' ? value.toFixed(2) : Number(value).toFixed(2);
  }
};

// 扩展queryParams
queryParams.value = {
  ...queryParams.value,
  alarmId: props.info.id
} as IQuery;
const getList = async () => {
  // 你的获取数据逻辑
  loading.value = true;
  const responses = await list(queryParams.value);
  tableData.value = responses.rows;
  total.value = responses.total;
  loading.value = false;
};
const AlarmVideoRef = ref();
//打开视频播放
const openAlarmVideo = (url: string) => {
  AlarmVideoRef.value.url = url;
  AlarmVideoRef.value.open();
};
onMounted(() => {
  getList();
});
defineExpose({
  open: openDialog,
  close: closeDialog
});
</script>

<template>
  <el-dialog v-model="visible" :modal="false" :draggable="true" width="50%" append-to-body class="largeScreen-dialog" :before-close="closeDialog">
    <div class="pipe-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.2)"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
        empty-text="暂无数据"
      >
        <el-table-column prop="alarmStartTime" label="报警时间" min-width="180" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="alarmGatherTime" label="设备上报时间" min-width="180" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="value" :label="getAlarmName" min-width="140" show-overflow-tooltip align="center" v-if="info.alarmType != '05'">
          <template v-slot="scope">
            <span>{{ alarmValue(scope.row.value) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="处置状态" min-width="120" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="alarmPicPath" label="报警图片" min-width="120" show-overflow-tooltip align="center" v-if="info.alarmType == '05'">
          <template v-slot="scope">
            <el-image
              v-if="scope.row.alarmPicPath"
              preview-teleported
              :src="getImagePreview(scope.row.alarmPicPath).previewImage"
              style="width: 60px; height: 60px"
              :preview-src-list="getImagePreview(scope.row.alarmPicPath).imageList"
              :initial-index="0"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="报警视频" min-width="120" show-overflow-tooltip align="center" v-if="info.alarmType == '05'">
          <template v-slot="scope">
            <el-button type="primary" link v-if="scope.row.alarmVideoUrl" @click="openAlarmVideo(scope.row.alarmVideoUrl)">查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <AlarmVideo ref="AlarmVideoRef" />
  </el-dialog>
</template>

<style scoped lang="scss">
.pipe-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;

    &.hidden {
      display: none;
    }
  }

  :deep(.el-pagination__total),
  :deep(.el-pagination__jump) {
    color: #fff;
  }
}
</style>
